<template>
  <view class="contenting">
    <Search></Search>
    <Preference :preferdata="preferdata"></Preference>
    <Title></Title>
    <view @click="poll" :catchtouchmove="true">
      <Delicacy id="boxFixed" :class="{ is_fixed: isFixed }"></Delicacy>
    </view>
    <Takeout :takeshop="takeshop"></Takeout>
    <!-- 兼容H5 的 computed 方法  必须有computed 的变量,不然H5中的rect变量不会更新-->
    <view style="display: none">{{ namepage }}</view>
  </view>
</template>

<script>
import Delicacy from './components/delicacy'
import Preference from './components/preference'
import Search from './components/search'
import Takeout from './components/takeout'
import Title from './components/title'
// 引入接口
import { listing } from '../../api/api'
// 引入请求地址
import { getpreferurl, wxshopurl } from '../../api/request'
// 引入Vuex mapState
import { mapState } from 'vuex'

export default {
  components: { Delicacy, Preference, Search, Takeout, Title },
  data() {
    return {
      // 为你优选 的 请求接口 数据
      preferdata: [],
      // 附近商家 的 筛选菜单 距离顶部的距离
      menutop: '',
      // 滚动距离顶部的值
      rect: '',
      // 附近商家 的 筛选菜单 置顶class的flag
      isFixed: false,
      // 附近商家 测试用的数据
      takeshopList: [
        {
          _id: '5e63b13d59eb7e2bff8479b5',
          openid: '5dfcf328da83f620e4077112',
          shop: '九丰土菜馆',
          logo: 'http://lstkk.oss-cn-beijing.aliyuncs.com/meituan/public/uploads/1583591740906.png',
          duration: '20',
          delivering: 1,
          physical: 0.3,
          capita: 20,
          types: '江浙菜',
          times: '8:00-18:00',
          address: '杭州市西湖区山水人家清水湾11幢11',
        },
        {
          _id: '5e63bbcb59eb7e2bff8479c8',
          openid: '5dfcf328da83f620e4077113',
          shop: '桥头排骨(文一路店)',
          logo: 'http://lstkk.oss-cn-beijing.aliyuncs.com/meituan/public/uploads/1583594443653.png',
          duration: '10',
          delivering: 0,
          physical: 1,
          capita: 10,
          types: '汉堡薯条',
          times: '8:00-18:00',
          address: '杭州市西湖区文一路419号-2',
        },
      ],
      // 附件商家接口得到数据
      takeshop: [],
    }
  },

  // beforeUpdate 生命周期. 得到附近商家 的 筛选菜单 距离顶部的距离; createSelectorQuery 只有在mounted后使用才有效
  onReady() {
    const query = uni.createSelectorQuery().in(this)
    query
      .select('#boxFixed')
      .boundingClientRect((data) => {
        // console.log('得到布局位置信息' + JSON.stringify(data))
        console.log('节点离页面顶部的距离为 = ' + data.top)
        // 得到附近商家 的 筛选菜单 的 距离顶部的距离
        this.menutop = data.top
      })
      .exec()
  },

  // 页面生命周期 监听页面滚动
  onPageScroll(e) {
    // console.log("onPageScroll e= ",e.scrollTop)
    // 实时监听距离顶部的值,给this.rect
    this.rect = e.scrollTop
    // console.log('this.rect = ', this.rect)
  },

  mounted() {
    // 为你优选 的 请求接口 方法
    this.preference()
  },

  watch: {
    // 监控vuex中screendata数据的变化,因为,用computed是H5,无法监测到数据的变化
    '$store.state.screendata'() {
      deep: true, console.log('watch............')
      this.takeshop = this.$store.state.screendata
    },
  },

  computed: {
    // 监听筛选组件置顶 和 不置顶
    namepage() {
      if (this.rect > this.menutop) {
        // console.log('置顶了************************')
        // 附近商家筛选菜单 css 置顶 打开
        this.isFixed = true
      } else {
        // console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@没有置顶了')
        // 附近商家筛选菜单 css 置顶 关闭
        this.isFixed = false
      }
    },

    // // vuex 得到state中的screendata
    // ...mapState(['screendata']),

    // // 其他页面来的附近商家数据
    // count() {
    //   // 在computed中使用,因为只有在vuex中screendata数据发生变化,就把数据传给this.takeshop -> 给子组件
    //   this.takeshop = this.screendata
    //   console.log('count computed *********')
    // },
  },

  methods: {
    // 为你优选 的 请求接口 方法
    preference() {
      // 并发批量请求 promise.all
      Promise.all([listing(getpreferurl), listing(wxshopurl)])
        .then((res) => {
          console.log('首页请求得到的数据 = ', res)
          // 网络请求数据 为你优选-> this.perferdata -> 子组件
          this.preferdata = res[0].data
          // 网络请求数据 附近商家-> this.takeshop -> 子组件
          this.takeshop = res[1].data
        })
        .catch((err) => {
          console.log(err)
        })
    },

    // 点击筛选事件 回到顶部
    poll() {
      // 将页面滚动到目标位置
      uni.pageScrollTo({
        // 滚动到页面的目标位置（单位px）,动态值 = onRead得到的距离顶部的距离
        scrollTop: this.menutop,
        // 动画时间 单位毫秒
        duration: 100,
      })
    },
  },
}
</script>

<style scope>
.contenting {
  margin: 0 15upx;
}
.is_fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
</style>
